{% extends "./inc/base.html" %}
{% block style %}
<link rel="stylesheet" href="/static/admin/js/zTree/zTreeStyle/zTreeStyle.css" type="text/css">
{% endblock%}
{% block content %}

<section class="vbox">
    <header class="header bg-light dk">
        <div class="btn-group pull-right">

            11


        </div>
        <p>{{controller.meta_title}}</p>
    </header>
    <section class="scrollable wrapper">
        <div class="row">
            <div class="col-lg-12">
                <section class="panel panel-default">
                    <div class="panel-body">
                        <form data-validate="parsley" action="#" class="form-horizontal" method="post" id="ajaxForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><i class="fa fa-asterisk text-danger"></i> 模板名称</label>

                                <div class="col-sm-10">

                                    <div class="row">
                                        <div class="col-md-4">
                                            <input data-required="true" type="text" data-remote="/admin/model/checkname" data-required="true" value="" name="name" class="form-control   parsley-validated">
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="line line-dashed b-b line-lg pull-in"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><i class="fa fa-asterisk text-danger"></i> 默认运费</label>

                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <div class="table-responsive">
                                            <table class="table m-b-n-sm ">
                                                <tbody>
                                                <tr>
                                                    <td  style="border-top: 0px; padding-left: 0; padding-top: 0" ><div class=" input-group ">
                                                        <span class="input-group-addon">首重</span>
                                                        <input data-required="true" type="text" placeholder="首重" class="form-control" name="first_weight" value="1000">
                                                        <span class="input-group-addon">（g）内</span>
                                                    </div></td>
                                                    <td style="border-top: 0px; padding-left: 0; padding-top: 0" > <div class="input-group ">
                                                        <input data-required="true" type="text" placeholder="运费" class="form-control" name="first_price" value="">
                                                        <span class="input-group-addon">{{config.setup.UNIT}}</span>
                                                    </div></td>
                                                    <td style="border-top: 0px; padding-left: 0; padding-top: 0" ><div class=" input-group ">
                                                        <span class="input-group-addon">每增加</span>
                                                        <input data-required="true" type="text" placeholder="增加重量" class="form-control" name="second_weight" value="1000">
                                                        <span class="input-group-addon">（g）</span>
                                                    </div></td>
                                                    <td style="border-top: 0px; padding-left: 0; padding-top: 0" > <div class="input-group ">
                                                        <span class="input-group-addon">增加</span>
                                                        <input data-required="true" type="text" placeholder="运费" class="form-control" name="second_price" value="">
                                                        <span class="input-group-addon">{{config.setup.UNIT}}</span>
                                                    </div></td>
                                                </tr>
                                                </tbody>
                                            </table>






                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 当配送地区没有指定时，使用默认运费！</span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="line line-dashed b-b line-lg pull-in"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">配送区域</label>

                                <div class="col-sm-10">
                                    <input type="hidden" name="zoning" value="[]">
                                    <div class="row">
                                        <div class="col-md-12 ">
                                            <section class="panel panel-default">

                                                <div class="table-responsive">
                                                    <table class="table  b-t b-light" id="addfare">
                                                        <thead>
                                                        <tr>

                                                            <th >运送到</th>

                                                            <th class="active" style="width: 120px">首重(g)</th>
                                                            <th class="active" style="width: 120px">运费(元)</th>
                                                            <th class="warning" style="width: 120px">续重(g)</th>
                                                            <th class="warning" style="width: 120px">运费(元)</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                    </table>
                                                </div>
                                                <footer class="panel-footer">
                                                    <div class="row">

                                                        <div class="col-sm-12 text-center">
                                                            <div class="btn-group m-t-none m-b-none"><a class="btn btn-default btn-addfare" href="javascript:;"><i class="fa fa-plus"></i> 指定可配送区域和运费</a></div>
                                                        </div>
                                                    </div>
                                                </footer>
                                            </section>
                                        </div>
                                        <div class="col-md-12">
                                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 配送区域</span>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="line line-dashed b-b line-lg pull-in"></div>
                            <div class="form-group form-submit">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button target-form="form-horizontal" type="submit" class="btn btn-primary btn-s-md ajax-post">确定</button>
                                    <button type="submit" onclick="javascript:history.back(-1);return false;" class="btn btn-default">返回
                                    </button>

                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>

    </section>
</section>

{% endblock %}
{% block script%}
<script src="/static/admin/js/zTree/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script src="/static/admin/js/parsley/parsley.min.js" type="text/javascript"></script>
<script src="/static/admin/js/parsley/parsley.extend.js" type="text/javascript"></script>
<script src="/static/admin/js/slimscroll/jquery.slimscroll.min.js"></script>
<script>
    $(function(){

        //点击添加时间
        $(".btn-addfare").click(function(e){
            var num = new Date().valueOf();

            addTr(num);
            getdata();
        })
        //删除
        $(document).on('click','.remove_fare',function(e){
            $(this).parents("tr").remove();
            getdata();
        })


        //改变时修改数据
        $(document).on("change","#addfare tbody tr input",function(){
            getdata();
        })
    });
    //添加列
    function addTr(num){
        var html = ""

        html += '<tr id="tr'+num+'"><td><input type="hidden" class="area" value=""><input type="hidden" class="selectarea" value=""> <div class="tohtml" ><a data-toggle="ajaxModal" href="/admin/ecom/farearea/id/tr'+num+'" class="text-info">添加可配送区域</a></div> <span class="pull-right"> <a data-toggle="ajaxModal" href="/admin/ecom/farearea/id/tr'+num+'" class="text-info">编辑</a> <a href="javascript:;" class="text-info remove_fare">删除</a></span> </td> <td class="active"><input data-required="true" type="text" placeholder="" value="1000" class="form-control f_weight" ></td> <td class="active"><input data-required="true" type="text" placeholder="填写价格" value="" class="form-control f_price"></td> <td class="warning"><input data-required="true" type="text" placeholder="" value="1000" class="form-control s_weight"></td> <td class="warning"><input data-required="true" type="text" placeholder="填写价格" value="" class="form-control s_price"></td></tr>'

        $("#addfare tbody").append(html);
    }
    //拿数据
    function getdata(){
        var trs = $("#addfare tbody tr");
        var trArr = [];
        $.each(trs,function(e){
            var trObj={};
            trObj.area = $(this).find("input.area").val();
            trObj.selectarea = $(this).find("input.selectarea").val();
            trObj.title =  $(this).find("div.tohtml").html();
            trObj.f_weight = $(this).find("input.f_weight").val();
            trObj.f_price = $(this).find("input.f_price").val();
            trObj.s_weight = $(this).find("input.s_weight").val();
            trObj.s_price = $(this).find("input.s_price").val();

            trArr.push(trObj);
        })
        $("input[name='zoning']").val(JSON.stringify(trArr));
    }
</script>
{% endblock%}